<template>
  <div class="pdf" v-show="pdfTF">
    <div class="pdf-tab">
      <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
      <div class="page_box">{{ pageNum }}/{{ pageTotalNum }}</div>
      <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
      <div class="colse_btn" @click="colseFun">关闭</div>
      <!-- <div class="btn-def" @click.stop="clock">顺时针</div> -->
      <!-- <div class="btn-def" @click.stop="counterClock">逆时针</div> -->
      <!-- <div class="btn-def" @click.stop="pdfPrintAll">全部打印</div> -->
      <!-- <div class="btn-def" @click.stop="pdfPrint">部分打印</div> -->
    </div>
    <!-- <div>进度：{{ loadedRatio }}</div>
    <div>页面加载成功: {{ curPageNum }}</div> -->
    <div class="box scroll_box">
      <pdf
        ref="pdf"
        :src="pdfUrl"
        :page="pageNum"
        :rotate="pageRotate"
        @password="password"
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)"
        @num-pages="pageTotalNum = $event"
        @error="pdfError($event)"
        @link-clicked="page = $event"
      >
      </pdf>
    </div>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  name: "Pdf",
  components: {
    pdf,
  },
  props: {
    pdfTF: {
      default: false,
    },
  },
  data() {
    return {
      pdfUrl:
        "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    };
  },
  mounted: function () {},
  methods: {
    colseFun() {
      this.$emit("clickPDF", false);
    },
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    clock() {
      this.pageRotate += 90;
    },
    counterClock() {
      this.pageRotate -= 90;
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is "123456"'));
      // console.log(reason);
    },
    pageLoaded(e) {
      this.curPageNum = e;
    },
    pdfError(error) {
      console.error(error);
    },
    pdfPrintAll() {
      this.$refs.pdf.print();
    },
    pdfPrint() {
      this.$refs.pdf.print(100, [1, 2]);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  margin: 0 10%;
  margin-top: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100vh - 150px);
}
//
.pdf {
  z-index: 99;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(204, 204, 204, 0.5);
  .pdf-tab {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: #ffffff;
    width: 100%;
    .btn-def {
      cursor: pointer;
    }
    .page_box {
      box-sizing: border-box;
      margin: 0 20px;
      padding: 20px;
      font-weight: bold;
    }
    .colse_btn {
      margin-left: 50px;
      cursor: pointer;
    }
  }
}
</style>
